<template>
	<view class="animal_kind">
		<view class="animal_header">
			<view class="animal_header_title">
				<view class="th2">Choose for
				</view>
				<view class="th1">Friend</view>
			</view>
			<image aspectFit class="index_header_img" src="/static//kind-bg.png" mode=""></image>
		</view>
		<view class="animal_main">
			<view class="animal_list">
				<view class="animal_list_main">

					<!-- v-for="(item,index) in 4" -->

					<view class="animal_list_tab" @click="jumpGo(item.type)" v-for="(item,index) in kindList">
						<view class="tab_img">
							<image :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="tab_title">
							{{item.name}}类
							<view class="tab_desc">
								{{item.desc}}
							</view>
						</view>

					</view>


				</view>
			</view>
		</view>

		<view-tabbar :idx="'1'"></view-tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	import {
		selList
	} from "@/api/index.js"
	export default {
		data() {
			return {
				active: 0,
				current: 0,
				kindList: []
			}
		},
		components: {
			'view-tabbar': Tabbar
		},
		onShow() {

			this.getKindList()
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			getKindList() {
				selList().then((data) => {
					console.log(data.data)
					this.kindList = data.data.rows
				})
			},
			jumpGo(x) {
				console.log(x)
				uni.setStorageSync("pet_type", x)
				uni.navigateTo({
					url: "/pages/kindList/kindList"
				})
			}
		}
	}
</script>

<style lang="scss">
	.animal_kind {

		background-color: #a1b275;

		.animal_index {
			height: 100%;
			background-color: #a1b275;

			.animal_search {
				margin: 0 15px;
				height: 50px;
				background-color: white;
				border-radius: 16px;
				display: flex;
				align-items: center;
				background-color: #ffffff;

				.search_icon {
					width: 20px;
					height: 20px;
					margin: 10px;
				}

				.sPlo {
					font-size: 14px;
					color: #BBC3CE;
					font-weight: 500;
				}

			}

		}

		.animal_header {
			width: 100%;
			height: 150px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.index_header_img {
			display: block;
			width: 172px;
			height: 100px;
			margin-right: 20px;
			margin-top: 10px;
		}

		.animal_header_title {
			margin-top: 20px;
			margin-left: 40px;
			color: white;
			line-height: 36px;

			.th2 {
				font-size: 28px;
				font-weight: 100;
			}

			.th1 {
				font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
				font-size: 28px
			}
		}

		.animal_main {
			border-radius: 43px 43px 0 0;
			background-color: #f3f2f2;
			padding-bottom: 70px;

		}

		.animal_list {
			margin: 0 20px;
			font-size: 20px;

			.animal_list_title {
				color: #5c6542;
			}

			.animal_list_main {
				padding-bottom: 20px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.animal_list_tab {
					height: 162px;
					width: 100%;
					border-radius: 28px;
					background-color: white;
					margin-top: 20px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tab_title {
						font-size: 30px;
						width: 50%;
						text-align: center;
						font-weight: 100;
						margin-bottom: 10px;

						.tab_desc {
							font-size: 12px;
							height: 64px;
							width: 90%;
							margin-top: 8px;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
						}
					}

					.tab_img {
						width: 152px;
						height: 152px;
						margin-left: 5px;
						border-radius: 26px;
						overflow: hidden;

						image {
							height: 100%;
							width: 100%;
						}

					}

				}

			}

		}

	}
</style>